<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.shareholder" placeholder="股东" class="filter-item" style="width:130px;margin-top:8px">
        <el-option label="股东" value="" />
        <el-option
          v-for="item in shareholderList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-top:8px" @click="handleFilter">查询</el-button>
      <el-button class="filter-item" style="margin-left: 10px;margin-top: 8px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增股东
      </el-button>

      <!-- <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="excelout" style="margin-top:8px" >导出</el-button> -->
      <!-- <excelout ></excelout> -->

    </div>
    <el-row style="margin-top:20px;font-size:14px;color:#666">
      <el-col :span="4">所有融资金额：{{ count.invest }}</el-col>
      <el-col :span="4">现存融资金额：{{ count.running }}</el-col>
      <el-col :span="4">已结清融资金额：{{ count.end }}</el-col>
      <el-col :span="4">待收融资金额：{{ count.ds }}</el-col>
      <el-col :span="4">杂费总收：{{ count.income }}</el-col>
      <el-col :span="4">其他总支出：{{ count.outcome }}</el-col>

    </el-row>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" size="mini" border fit highlight-current-row style="width: 100%;margin-top: 20px;">
      <el-table-column label="股东姓名" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所有融资金额" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.all_invest_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="现存融资金额" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.all_running_invest_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="待收融资金额" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.ds_invest_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已结清融资金额" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.all_end_invest_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="债权总额" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.all_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="现存本金" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.no_settle_benjin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已结算总额" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.all_settled_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="未结算总额" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.all_no_settle_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="杂费回款" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.incidental_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支出费用" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{ row.outcome_money }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="总分利" align="center">
        <template slot-scope="{row}">
          <span>{{ row.total_price }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="toLookOrder(row.id)">
            查看订单
          </el-button>

          <el-button v-if="row.is_alone==1" type="success" size="mini" @click="toLookFlow(row.id)">
            查看流水
          </el-button>
          <el-button v-if="row.is_alone==1" type="info" size="mini" @click="recharge(row.id)">
            充值
          </el-button>
          <!-- <el-button type="warning" size="mini" @click="editShareholder(row)" >
            编辑
          </el-button> -->
          <el-button v-if="row.status==1" type="warning" size="mini" @click="onOff(row,0)">
            禁用
          </el-button>
          <el-button v-if="row.status==0" type="success" size="mini" @click="onOff(row,1)">
            启用
          </el-button>
        </template>

      </el-table-column>

    </el-table>

    <el-dialog title="股东设置" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="shreholder_form" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="股东名称" prop="name">
          <el-input v-model="shreholder_form.name" type="text" placeholder="请输入股东名称" />
        </el-form-item>
        <el-form-item label="初始金额" prop="account_amount">
          <el-input v-model="shreholder_form.account_amount" type="number" placeholder="请输入账户金额" />
        </el-form-item>
        <el-radio-group v-model="shreholder_form.is_alone">
          <el-radio :label="1">独立账户</el-radio>
          <el-radio :label="0">无独立账户</el-radio>
        </el-radio-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="createData()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="流水" :visible.sync="flowListAble" style="width:1500px;margin:auto">
      <el-row style="margin-top:20px;font-size:14px;color:#666">
        <el-col :span="6">初始金额：{{ shareholderInfo.account_amount }}</el-col>
        <el-col :span="5">余额：{{ shareholderInfo.yue }}</el-col>
        <el-col :span="5">租金：{{ shareholderInfo.huik }}</el-col>
        <el-col :span="5">出资：{{ shareholderInfo.chuzi }}</el-col>
      </el-row>

      <table class="flowtable">
        <tr>
          <th>时间</th>
          <th>内容</th>
          <th>收支类型</th>
          <th>收入</th>
          <th>支出</th>
          <th>结余</th>
        </tr>
        <tr v-for="(item,index) in flowList" :key="index">
          <td>{{ item.date }}</td>
          <td>{{ item.real_name }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.income_this_money }}</td>
          <td>{{ item.outcome_this_money }}</td>
          <td>{{ item.balance }}</td>
        </tr>
      </table>
      <pagination v-show="flow_total>0" :total="flow_total" :page.sync="flowQuery.page" :limit.sync="flowQuery.limit" @pagination="getFlowList" />
    </el-dialog>
    <el-dialog title="充值" :visible.sync="rechargeFormVisible" style="width: 1000px;margin:auto">
      <el-form ref="dataForm" :rules="recharge_rules" :model="recharge_form" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="充值金额" prop="name">
          <el-input v-model="recharge_form.money" type="number" placeholder="输入金额" />
        </el-form-item>
        <el-form-item label="充值日期">
          <el-date-picker v-model="recharge_form.recharge_time" style="width:150px" format="yyyy-MM-dd" type="datetime" placeholder="充值日期" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rechargeFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="rechargeSubmit()">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import excelout from '@/components/excelout/index.vue'
import {
  createShareholder, toLookFlow,
  getShareHolderInvest,
  getShareHolder,
  exceloutday,
  rechargeSubmit
} from '@/api/finance'
import waves from '@/directive/waves' // waves directive
import {
  formatDate
} from '@/utils/formatDate.js'
import {
  getAllList
} from '@/api/user'
import {
  parseTime, getNodes
} from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ComplexTable',
  components: {
    Pagination, excelout
  },
  directives: {
    waves
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '禁用',
        1: '启用'
      }
      return statusMap[status]
    },

    formatDate(time) {
      time = time * 1000
      const date = new Date(time)

      return formatDate(date, 'yyyy-MM-dd')
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    return {
      rechargeFormVisible: false,
      flowListAble: false,
      settleAble: false,
      shareholderList: {},
      nodes: [],
      shreholder_form: {
        is_alone: '0',
        id: ''
      },
      recharge_form: {
        shareholder: '',
        money: '',
        recharge_time: ''
      },
      flowList: null,
      rules: {
        name: [{
          required: true,
          message: '股东姓名必须填写',
          trigger: 'blur'
        }]
      },
      count: [],
      value1: '',
      value2: '',
      tableKey: 0,
      table: 1,
      list: null,
      payway: [],
      collector: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        shareholder: null,
        real_name: null,
        date: null,
        date_end: ''
      },
      flowQuery: {
        limit: 10,
        page: 1
      },
      shareholderInfo: {
        yue: 0,
        huik: 0,
        chuzi: 0,
        account_amount: 0
      },

      shareQuery: {
        limit: 100
      },
      dialogFormVisible: false,
      dialogStatus: ''
    }
  },
  created() {
    this.getShareHolder()
    this.cacheQueryFormat()
    this.getList()
    this.nodes = getNodes()
    // 添加钩子，页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  mdestroyed() {
    // 添加钩子，页面刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    toLookOrder(shareholder) {
      this.$router.push('/finance/orderlist?shareholder=' + shareholder)
    },
    beforeunloadFn(e) {
      // 刷新页面事件
      sessionStorage.removeItem('finaceday')
    },
    cacheQueryFormat() {
      const cacheQuery = sessionStorage.getItem('finaceday')
      if (cacheQuery) {
        this.listQuery = JSON.parse(cacheQuery)
      }
    },
    getShareHolder() {
      getShareHolder(this.shareQuery).then(response => {
        this.shareholderList = response.data.data
      })
    },
    excelout() {
      this.listLoading = true
      this.listQuery.page = 1
      this.listQuery.limit = this.total
      exceloutday(this.listQuery).then(response => {
        this.listLoading = false
        const filepath = response.data.path
        window.location.href = filepath
      })
    },

    getList() {
      sessionStorage.setItem('finaceday', JSON.stringify(this.listQuery))
      this.listLoading = true
      getShareHolderInvest(this.listQuery).then(response => {
        this.list = response.data.shareholder
        this.count = response.data.count

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.2 * 1000)
      })
    },
    handleCreate() {
      this.dialogFormVisible = true
    },
    recharge(shareholder) {
      this.rechargeFormVisible = true
      this.recharge_form.shareholder = shareholder
    },
    toLookFlow(shareholder) {
      this.flowListAble = true
      this.flowQuery.shareholder = shareholder
      this.getFlowList()
    },
    rechargeSubmit() {
      rechargeSubmit(this.recharge_form).then(response => {
        if (response.code == 200) {
          this.$notify({
            title: '提示',
            message: response.msg,
            type: 'success',
            duration: 2000,
            onClose: this.getList()
          })
          this.rechargeFormVisible = false
        } else {
          this.$notify({
            title: '提示',
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    editShareholder(row) {
      this.dialogFormVisible = true

      this.shreholder_form = row
    },

    getFlowList() {
      toLookFlow(this.flowQuery).then(response => {
        this.flowList = response.data.list.data
        this.flow_total = response.data.list.total
        this.shareholderInfo.yue = response.data.yue
        this.shareholderInfo.huik = response.data.huik
        this.shareholderInfo.chuzi = response.data.chuzi
        this.shareholderInfo.account_amount = response.data.account_amount
      })
    },
    onOff(row, status) {
      const pam = {
        status: status,
        id: row.id
      }
      createShareholder(pam).then(() => {
        this.getList()
        // this.$refs['dataForm'].resetFields();
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: 'Successfully',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },

    handleFilter() {
      this.getList()
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const pam = {
            name: this.shreholder_form.name,
            account_amount: this.shreholder_form.account_amount,
            is_alone: this.shreholder_form.is_alone,
            id: this.shreholder_form.id
          }
          createShareholder(pam).then(() => {
            this.getList()
            // this.$refs['dataForm'].resetFields();
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Created Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>
<style scoped>
  .flowtable{
    width: 80%;margin-left: 10%;
    border: 1px solid #eee;margin-top: 20px;  border-collapse:collapse;
  }
  .flowtable tr {height: 40px;}
  .flowtable td,.flowtable th{
    text-align: center;
    border-collapse:collapse;border: 1px solid #eee;
  }
</style>
